$(function () {
    let total;
    let detailList
    let xhr = new XMLHttpRequest();
    xhr.onloadend = function () {
        if (xhr.status == 200) {

            total = JSON.parse(xhr.responseText);

            function create1(ele, start, end) {
                let lf = '';
                for (let i = start; i < end; i++) {
                    lf += `<div class="div1">
                <a class="goods-detail" href='http://localhost/mi/detail/'>
                    <div class="top">
                        
                        <img src="${total[i].imgurl}" alt="" width="106px" height="134px">
                        <h3 class="p1">${total[i].name}</h3>
                        <p class="p2">${total[i].describe}</p>
                        <span class="p3">${total[i].price}元起</span>
                        <span style="display:none">${total[i].id}</span>
                    </div>
                </a>

                <a class="goods-detail" href='http://localhost/mi/detail/'>
                    <div class="bottom">
                        <img src="${total[i + 4].imgurl}" alt="" width="106px" height="134px">
                        <h3 class="p1">${total[i + 4].name}</h3>
                        <p class="p2">${total[i + 4].describe}</p>
                        <span class="p3">${total[i + 4].price}元起</span>
                        <span style="display:none">${total[i + 4].id}</span>
                    </div>
                </a>

                </div>`
                }

                ele.innerHTML += lf;
            }


            //循环生成手机的界面
            let phone = document.querySelector('#phone');
            create1(phone, 0, 4);

            //循环生成电脑界面
            let computer = document.querySelector('#computer');
            create1(computer, 4, 8);

            //循环生成生活电器界面
            let life = document.getElementById('life');
            create1(life, 16, 20);





            function create2(ele, start, end) {
                let jm = '';
                for (let i = start; i < end; i++) {
                    jm += `<div class="div2" >
                <div class="div21">
                    <a class="goods-detail" href="http://localhost/mi/detail/">
                        <img src="${total[i].imgurl}" alt="" width="160px" height="160px">
                    <p class="p1">${total[i].name}</p>
                    <p class="p2">${total[i].describe}</p>
                    <p class="p3">${total[i].price}元</p>
                    <span style="display:none">${total[i].id}</span>
                    </a>
                </div>
                <div class="div22">
                    <a class="goods-detail" href="http://localhost/mi/detail/">
                        <img src="${total[i + 4].imgurl}" alt="" width="160px" height="160px">
                    <p class="p1">${total[i + 4].name}</p>
                    <p class="p2">${total[i + 4].describe}</p>
                    <p class="p3">${total[i + 4].price}元<del>${Number(total[i + 4].price) + 100}元</del></p>
                    <span style="display:none">${total[i + 4].id}</span>
                    </a>
                    
                </div>
            </div>`

                }
                ele.innerHTML += jm;
            }



            //循环生成家电
            let jd = document.querySelector('#jd');
            create2(jd, 20, 24);


            //循环生成智能家居
            let auto = document.querySelector('#auto');
            create2(auto, 24, 28);

            //循环生成智能穿戴
            let wear = document.getElementById('wear');
            create2(wear, 30, 34);


            //循环生成日用百货
            let things = document.getElementById('things');
            create1(things, 35, 39);

            if (detailList == null || detailList.length == 0) {
                detailList = []
            }
            $('.goods-detail').click(function () {
                // console.log($(this));
                // event.preventDefault()
                var goodObj = {
                    id: $(this).find('span').last().text(),
                    imgurl: $(this).find('img')[0].src,
                    name: $(this).find('.p1').html(),
                    describe: $(this).find('.p2').html(),
                    price: parseInt($(this).find('.p3').html()),
                    num: 1
                };
                console.log(goodObj.id, goodObj.imgurl, goodObj.name, goodObj.describe, goodObj.price);

                if (detailList.length === 0) {
                    // 添加到detailList
                    detailList.push(goodObj);
                } else {
                    for (var i = 0; i < detailList.length; i++) {
                        // 如果商品已经存在cookie中，则数量+1
                        if (detailList[i].id === goodObj.id) {
                            detailList[i].num++;
                            localStorage.setItem('detaillist', JSON.stringify(detailList))
                            break
                        }
                    } if (i === detailList.length) {
                        // 添加到detailList
                        detailList.push(goodObj);
                        localStorage.setItem('detaillist', JSON.stringify(detailList))
                    }
                }
                localStorage.setItem('detaillist', JSON.stringify(detailList))
            })
        } else {
            alert(xhr.responseText);
        }
    }


    xhr.open('get', 'http://localhost/mi/mi.json');

    xhr.send(null);
})








